<!--
 * @Author: Rachel 943701297@qq.com
 * @Date: 2022-06-30 09:28:54
 * @LastEditors: Rachel 943701297@qq.com
 * @LastEditTime: 2022-06-30 10:52:32
 * @FilePath: \JS\JSCode\添加删除记录.html
 * @Description: DOM增删改练习，添加删除记录
 * 
 * Copyright (c) 2022 by Rachel 943701297@qq.com, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM练习</title>
    <link rel="stylesheet" href="./style/css2.css">
    <script>
        /**
         * @description: 创建一个为a绑定单击响应函数的函数，防止新添加人员以后Delete功能失效
         * @return {*}
         */
        function delA() {
			// 需要使用this，不能够直接使用a，因为加载顺序关系不同，for循环直接执行，响应函数要等到触发才执行
            let tr = this.parentNode.parentNode;
            let name = tr.getElementsByTagName("td")[0].innerHTML;
            let flag =  confirm("确认"+name+"删除吗？")
            if(flag){
                tr.parentNode.removeChild(tr);
            }
            return false;
        } 
        window.onload = function() {
            let allA = document.getElementsByTagName("a");
            let table = document.getElementById("employeeTable");
            let tbody = table.getElementsByTagName("tbody")[0];
            // 为已有的a标签添加响应函数
			/* for循环会在页面加载完成后立即执行，
				而响应函数会在超链接被点击时才执行，
				当响应函数执行时，for循环早已执行完毕
			 */
            for (const a of allA) {
				// console.log(this == a);	// false
                a.onclick = delA;
            }
            let submit = document.getElementById("addEmpButton");
            submit.onclick = function() {
                // 获取信息
                let name = document.getElementById("empName").value;
                let email = document.getElementById("email").value;
                let salary = document.getElementById("salary").value;
                // a标签
                // let aTd = document.createElement("td");
                // let a = document.createElement("a");
                // a.innerText = "Delete";
                // a.href = "javascript:;";
                // a.onclick = delA;
                // aTd.appendChild(a);

                let tr = document.createElement("tr");

                tr.innerHTML =  "<td>"+name+"</td>"+
			                    "<td>"+email+"</td>"+
			                    "<td>"+salary+"</td>"+
			                    "<td><a href='javascript:;'>Delete</a></td>";
                // 获取刚刚添加a
                tr.getElementsByTagName("a")[0].onclick = delA;
                // tr.appendChild(aTd); 

                // table.appendChild(tr);
                // 注意添加后观察结构是否一致
                tbody.appendChild(tr);
            }
        }
    </script>
</head>
<body>
    <table id="employeeTable">
		<tr>
			<th>Name</th>
			<th>Email</th>
			<th>Salary</th>
			<th>&nbsp;</th>
		</tr>
		<tr>
			<td>Tom</td>
			<td>tom@tom.com</td>
			<td>5000</td>
			<td><a href="javascript:;">Delete</a></td>
		</tr>
		<tr>
			<td>Jerry</td>
			<td>jerry@sohu.com</td>
			<td>8000</td>
			<td><a href="deleteEmp?id=002">Delete</a></td>
		</tr>
		<tr>
			<td>Bob</td>
			<td>bob@tom.com</td>
			<td>10000</td>
			<td><a href="deleteEmp?id=003">Delete</a></td>
		</tr>
	</table>
	<div id="formDiv">
		<h4>添加新员工</h4>
		<table>
			<tr>
				<td class="word">name: </td>
				<td class="inp">
					<input type="text" name="empName" id="empName" />
				</td>
			</tr>
			<tr>
				<td class="word">email: </td>
				<td class="inp">
					<input type="text" name="email" id="email" />
				</td>
			</tr>
			<tr>
				<td class="word">salary: </td>
				<td class="inp">
					<input type="text" name="salary" id="salary" />
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button id="addEmpButton" value="abc">
						Submit
					</button>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>